<template>
  <div class="collection">
    <div class='product-li top-li' v-for="(item,index) of chapters" :key="index" @click="showDetail(item)">
      {{item.title}}
    </div>
  </div>
</template>

<script>
  export default {
    name: "Chapter",
    data() {
      return {
        chapters: []
      }
    },
    methods: {
      showDetail(item) {
        this.$router.push({
          name: 'detail',
          params: {
            id: this.$route.params.id,
            item: item
          }
        })
      }
    },
    mounted() {
      const res = this.$Http.get(`/book/chapter/${this.$route.params.id}`)
      this.chapters = res.data
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/styles/global";

  .collection {
    font-size: px2rem(16);
    height: -webkit-fill-available;
    overflow: auto;
  }
</style>